<template>
	<view style="position: fixed;z-index: 99;width: 100%;background-color: #fff;top: 0;height: 80rpx;">
		<scroll-view scroll-x="true">
			<view style="width: 151%;">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#3476f0" style="width: 125%;height: 80rpx;"></uni-segmented-control>
			</view>
		</scroll-view>
	</view>
	<view style="margin-top: 80rpx;" class="container">
		<view class="card" v-for="item in liveData" :key="item" @click="toDetial(item.id)" v-if="liveData.length !== 0">
			<view class="left">
				<!-- <view class="type">
					{{ "课程" }}
				</view> -->
				<image :src="item.thumb" mode=""></image>
			</view>
			<view class="right">
				<text style="display: -webkit-box; 
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2;">{{ item.title }}</text>
				<br>
				<text class="info">授课人：{{ item.teacher_name }}</text>
				<view class="bottom">
					<view class="botLeft">
						{{ "免费" }}
					</view>
					<view class="botRight">
						剩余名额: {{ item.update_by }}
					</view>
				</view>
			</view>
		</view>
		<view v-else class="without">
			<image src="@/static/without.png" mode=""></image>
		</view>
		<view style="height: 50px;"></view>
	</view>
</template>

<script>
	import {
		getList,
		category
	} from "@/api/course.js";
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		onLoad: function(option) {
			let that = this;
			this.search = option.search;
			category({
				scenario: 'course',
			}).then(res => {
				that._type = res;
				res.forEach(item => {
					that.items.push(item.title);
				})
			});
			getList({
				keyword: option.search,
			}).then(res => {
				that.liveData = res.list;
			})
		},
		data() {
			return {
				_type: '',
				search: '',
				searchValue: '',
				liveData: [],
				items: ['全部'],
				current: 0,
				active: 0
			}
		},
		methods: {
			toDetial(id) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			onClickItem(id) {
				let that = this;
				console.log(id.currentIndex)
				this.items[id.currentIndex]
				this._type.forEach(item => {
					if (item.title === this.items[id.currentIndex]) {
						getList({
							category_id: item.id,
						}).then(res => {
							that.liveData = res.list;
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../static/font.scss';
	.container {
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
	}

	.without {
		width: 100%;
		height: 80%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 200px;
			height: 200px;
		}
	}

	.card {
		background-color: #fff;
		display: flex;
		box-sizing: border-box;
		margin: 10px;
		border-radius: 10px;
		overflow: hidden;
		height: 130px;

		.left {
			width: 50%;
			height: 100%;
			position: relative;

			.type {
				position: absolute;
				right: 10px;
				top: 10px;
				padding: 3px;
				color: $uni-text-color-white;
				background-color: rgba(86, 86, 86, 0.8);
				border-radius: 5px;
				font-size: 12px;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			width: 50%;
			padding: 10px;
			position: relative;

			text {
				font-size: $uni-text-size-md;
			}

			.info {
				color: $uni-text-color-grey;
				font-size: 14px;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.bottom {
				view {
					color: $uni-text-color-grey;
					font-size: 14px;
				}

				.botLeft {
					color: red;
					font-size: 16px;
				}

				width: 80%;
				position: absolute;
				bottom: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
